<template>
  <div class="app-wrapper">
    <el-container style="width: 100vw;height: 100vh;">
      <el-header style="width: 100vw;height: 8vh;">
        <div class="left-menu">
          <img src="../assets/logo.png" alt="">
        </div>
        <div class="left-menu1">
          <span style="justify-content: center;padding-bottom: 20%;">
          陕西省水利专家管理平台
        </span></div>
        <div class="right-menu">
            <router-link to="/routerpage">
              <span style="color: #fff;font-size: 0.8vw;margin-right: 10%;"><i class="el-icon-s-home" style="font-size:1.2vw;color: #fff;margin-right: 10px;"></i>首页</span>

            </router-link>


      <el-dropdown class="avatar-container" trigger="click">
        <i class="el-icon-user" style="font-size:1.2vw;color: #fff;margin-top: 25%;"></i>

        <!-- <div class="avatar-wrapper">
          <i class="el-icon-caret-bottom" />
        </div> -->
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/routerpage">
            <el-dropdown-item>
              主页
            </el-dropdown-item>
          </router-link>
          <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
            <el-dropdown-item>Github</el-dropdown-item>
          </a>
          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
            <el-dropdown-item>Docs</el-dropdown-item>
          </a> -->
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- <span style="color: #fff;font-size: 0.8vw">用户:{{username}}</span> -->
      <span style="color: #fff;font-size: 0.8vw">用户</span>
    </div>
      </el-header>
      <el-container  style="width: 100vw;height: 90vh;">
        <el-aside width="200px">
          <el-menu
    router
    class="el-menu-vertical-demo"
    @open="handleOpen"
    :unique-opened = 'true'
    @close="handleClose"
    background-color="#334C6A"
    text-color="#fff"
    active-text-color="#63DBFF">
    <el-menu-item active v-if="type == '专家抽取管理'" index="/Review/index">
      <i class="el-icon-s-home" ></i>
      <span style="font-size: 0.8vw">
        专家抽取管理
      </span>
    </el-menu-item>
    <el-menu-item v-if="type == '专家入库管理'" index="/dashboard/index">
      <i class="el-icon-s-home"></i>
      <span style="font-size: 0.8vw">
        专家入库管理
      </span>

    </el-menu-item>
    <el-menu-item v-if="type == '专家出库管理'" index="/expert-exit/index">
      <i class="el-icon-s-home"></i>
      <span style="font-size: 0.8vw">
        专家出库管理
      </span>

    </el-menu-item>
    <el-menu-item v-if="type == '专家库管理'" index="/example/table">
      <i class="el-icon-s-home"></i>

      <span style="font-size: 0.8vw">
        专家库管理
      </span>
    </el-menu-item>
    <el-menu-item v-if="type == '项目后评价管理'" index="/appraise/index">
      <i class="el-icon-s-home"></i>

      <span style="font-size: 0.8vw">
        项目后评价管理
      </span>
    </el-menu-item>
    <!-- <el-menu-item v-if="type == '平台管理'" index="/platform/index">
      <i class="el-icon-s-home"></i>

      <span style="font-size: 0.8vw">
        平台信息
      </span>
    </el-menu-item> -->
    <el-submenu v-if="type == '平台管理'" index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span style="font-size: 0.8vw">系统管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/platform/part" style="font-size: 0.8vw">部门管理</el-menu-item>
          <el-menu-item index="/platform/role" style="font-size: 0.8vw">角色管理</el-menu-item>
          <el-menu-item index="/platform/index" style="font-size: 0.8vw">用户管理</el-menu-item>
          <!-- <el-menu-item index="/platform/menu" style="font-size: 0.8vw">菜单管理</el-menu-item> -->
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item v-if="type == '平台管理'" index="/platform/monitor">
      <i class="el-icon-s-home"></i>

      <span style="font-size: 0.8vw">
        系统监控
      </span>
    </el-menu-item>
    <el-submenu v-if="type == '平台管理'" index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span style="font-size: 0.8vw">日志管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/platform/loginlog" style="font-size: 0.8vw">登录日志</el-menu-item>
          <el-menu-item index="/platform/operatelog" style="font-size: 0.8vw">操作日志</el-menu-item>
          <el-menu-item index="/platform/unusuallog" style="font-size: 0.8vw">异常日志</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
  </el-menu>
        <!-- /platform/people -->
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import { Navbar, Sidebar, AppMain } from './components'
// import ResizeMixin from './mixin/ResizeHandler'
import { mapGetters } from 'vuex'
export default {
  name: "Layout",
  components: {
    // Navbar,
    // Sidebar,
    // AppMain
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
    ]),
    activeMenuIndex() {
    const menuMap = {
      '专家抽取管理': '/Review/index',
      '专家入库管理': '/dashboard/index',
      '专家出库管理': '/expert-exit/index',
      '专家库管理': '/example/table',
      '平台管理': '/platform/people',
    };

      const config = menuMap[this.type];
console.log(config);
    return config;
  }
  },
  data() {
    return {
      type: localStorage.getItem("name"),
      username: '王五',
    }
  },
  mounted() {
    console.log(this.type);

  },
  // mixins: [ResizeMixin],
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar;
    },
    device() {
      return this.$store.state.app.device;
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader;
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile",
      };
    },
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      localStorage.removeItem('token')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
@import "~@/styles/variables";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100vh;
  width: 100vw;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}

.el-container {
  // height: 100vh;
  // width:100vw;
}
.el-header, .el-footer {
    background-color: #334C6A;
    color: #333;
    height: 8vh ;
    text-align: center;
    line-height: 8vh;
  }

  .el-aside {
    background-color: #334C6A;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
.left-menu {
  float: left;
    height: 100%;
    width: 18vw;
    font-size: 2.0vw;
    // background-color: red;
    line-height: 8vh;
    img {
      width: 80%;
      margin-top: 3%;
    }
}
.left-menu1 {
  float: left;
    height: 100%;
    width: 20vw;
    font-size: 1.5vw;
    // background-color: red;
    line-height: 8vh;
    color: white;
    img {
      width: 50%;
      margin-top: 1%;
    }
}
  .right-menu {
    float: right;
    height: 100%;
    width: 20vw;
    // background-color: red;
    line-height: 8vh;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }

    .avatar-container {
      margin-right: 10px;
      width: 8%;
      color: white;
      height: 70%;
      .avatar-wrapper {
        margin-top: 5px;
        position: relative;
        font-size: 1.5vw;
        color: white;
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
</style>
